/*
 * @Description: 页面标题操作组件
 * @Author: Rfan
 * @Date: 2022-09-19 14:08:51
 * @LastEditTime: 2022-09-19 17:48:40
 */

import { useEffect, useState } from 'react';
import { Button, Divider, Form, Input, message, Select, Space, Typography } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import { treeToArr } from '@/utils';
import { selectItemByKey } from '@/utils/list';
import cs from 'classnames';
import classNames from 'classnames/bind';
import { exportConvertLog } from '@/api/log/convert';
import { useLogContext } from '../contexts/LogContext';
import styles from '../styles/pageOperate.module.scss';
import { Callbacks } from 'rc-field-form/lib/interface';
import { IDictionary } from '@/interfaces/global';

const cx = classNames.bind(styles);

const PageOperate = (props: any) => {
  const { classname } = props;
  const {
    selectLogNav,
    logNavList,
    listCondition,
    stateList,
    exportCols,
    setListCondition,
    logNavFilter
  } = useLogContext();
  const [form] = Form.useForm();

  const [title, setTitle] = useState('saveAndUse');

  useEffect(() => {
    const logNavArr = treeToArr(logNavList);
    const select = selectItemByKey(selectLogNav, logNavArr, 'key');
    setTitle(select?.label || '');
  }, [selectLogNav]);

  /**
   * 导出日志
   */
  const exportLogs = () => {
    exportConvertLog(exportCols).then((res: any) => {
      message.success('导出成功');
      console.log('convert', logNavFilter(selectLogNav), selectLogNav);
      const blob = new Blob([res]);
      const aTag = document.createElement('a');
      aTag.href = URL.createObjectURL(blob);
      aTag.download = `${logNavFilter(selectLogNav)}.xlsx`;
      aTag.style.display = 'none';
      document.body.appendChild(aTag);
      aTag.click();
      aTag.remove();
    });
  };

  const fieldsChange: Callbacks['onValuesChange'] = (_changedValues, allValues) => {
    setListCondition(allValues);
  };

  const options = [{ id: '', name: '全部' }, ...stateList].map((item: IDictionary) => ({
    label: item.name,
    value: item.id
  }));

  return (
    <div className={cs('filter-container', 'page-operate', classname, cx('page-operate'))}>
      <Typography.Title className={cx('table-title')} level={5}>
        {title}
      </Typography.Title>
      <div className={cx('filter-wrap')}>
        <Form
          form={form}
          layout="inline"
          initialValues={listCondition}
          onValuesChange={fieldsChange}
        >
          <Form.Item label="文件关键词">
            <Input placeholder="文件关键词" />
          </Form.Item>
          <Form.Item name="status" label="转换结果">
            <Select options={options} style={{ width: 100 }} />
          </Form.Item>
        </Form>
      </div>
      <Space size="small">
        <Button
          onClick={() => {
            exportLogs();
          }}
        >
          导出
        </Button>
        <Button>刷新</Button>
        <Button icon={<InfoCircleOutlined />}>转换说明</Button>
        <Divider type="vertical" />
        <Button>筛选</Button>
      </Space>
    </div>
  );
};

export default PageOperate;
